<template>
    <view :style="{ '--color': color }">
        <status-bar title="添加银行卡"></status-bar>
        <view class="viewbox auto">
            <picker mode="selector" :range="bank" @change="bankSelect">
                <view class="list bot">
                    <text class="title">选择银行</text>
                    <view class="flex-1 height d-flex j-sb a-center">
                        <text class="size26" :class="bankName ? 'color_33' : 'color_99'">{{ bankName ? bankName : '请选择银行' }}</text>
                        <view class="iconfont icon-a-zujian32 color_cc h6"></view>
                    </view>
                </view>
            </picker>
            <view class="list bot">
                <text class="title">开户支行</text>
                <input type="text" class="flex-1 height color_33 size26" v-model="branchBank" placeholder="输入开户支行" placeholder-class="play" />
            </view>
            <view class="list bot">
                <text class="title">银行卡号</text>
                <input type="number" v-model="bankCard" class="flex-1 height color_33 size26" placeholder="输入完整的银行卡号" placeholder-class="play" />
            </view>
            <view class="list bot">
                <text class="title">持卡人姓名</text>
                <input type="text" v-model="userName" class="flex-1 height color_33 size26" placeholder="点击输入持卡人姓名" placeholder-class="play" />
            </view>
            <view class="list bot">
                <text class="title">身份证号码</text>
                <input type="text" v-model="idNo" class="flex-1 height color_33 size26" placeholder="点击输入身份证号码" placeholder-class="play" />
            </view>
            <view class="list bot">
                <text class="title">联系电话</text>
                <input type="number" v-model="phone" maxlength="11" class="flex-1 height color_33 size26" placeholder="点击输入联系电话" placeholder-class="play" />
            </view>
        </view>

        <signature v-if="balance_separate == 1" Type="1" @Update="Update"></signature>

        <view class="viewboxs auto d-flex j-sa a-center m-top50">
            <view class="btns flexac bgf4 size26 color_38" @click="$back()">考虑一下</view>
            <view class="btns flexac config size26 white" @click="addBack">添加</view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import signature from '@/moneyPage/components/signature.vue';
    export default {
        components: {
            signature
        },
        data() {
            return {
                bank: [
                    '中国工商银行',
                    '中国建设银行',
                    '中国银行',
                    '交通银行',
                    '中国农业银行',
                    '招商银行',
                    '邮政储蓄银行',
                    '光大银行',
                    '民生银行',
                    '平安银行',
                    '浦发银行',
                    '中信银行',
                    '兴业银行',
                    '华夏银行',
                    '广发银行',
                    '重庆银行',
                    '重庆农村商业银行',
                    '北京银行',
                    '徽商银行',
                    '天津银行',
                    '深圳农村商业银行',
                    '上海银行',
                    '汉口银行',
                    '南京银行',
                    '宁波银行',
                    '龙江银行',
                    '北京农商银行',
                    '江苏银行',
                    '广州银行',
                    '浙商银行',
                    '杭州银行',
                    '上海农商银行',
                    '渤海银行',
                    '广州农村商业银行',
                    '青岛银行',
                    '成都银行',
                    '哈尔滨银行',
                    '吉林银行',
                    '大连银行',
                    '齐鲁银行',
                    '东莞银行',
                    '长沙银行',
                    '河北银行',
                    '东莞农村商业银行',
                    '郑州银行',
                    '包商银行'
                ],
                bankName: '',
                branchBank: '',
                bankCard: '',
                userName: '',
                idNo: '',
                phone: '',
                attFileId: '',
                file_name: '',
                balance_separate: 0 // 是否需要上传签名
            };
        },
        onLoad(opt) {
            if (opt.balance_separate) this.balance_separate = opt.balance_separate;
        },

        methods: {
            addBack() {
                if (!this.bankName) return this.$Toast('请选择银行');
                if (!this.branchBank) return this.$Toast('请输入开户支行');
                if (!this.bankCard) return this.$Toast('请输入银行卡号');
                if (!this.userName) return this.$Toast('请输入持卡人姓名');
                if (this.balance_separate == 1) {
                    if (!this.attFileId || !this.file_name) return this.$Toast('请先完成签名');
                }
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/singleSaleApi/addBankcard',
                        data: {
                            cash_method: 1,
                            userName: this.userName,
                            bankName: this.bankName,
                            bankCard: this.bankCard,
                            branchBank: this.branchBank,
                            idNo: this.idNo,
                            phone: this.phone,
                            attFileId: this.attFileId,
                            file_name: this.file_name
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Toast(res.msg, 2);
                    });
            },
            bankSelect(e) {
                this.bankName = this.bank[e.detail.value];
            },
            Update(item) {
                (this.attFileId = item.attFileId), (this.file_name = item.file_name);
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss" scoped>
    .signature-canvas {
        box-sizing: border-box;
    }
    .SignatureBox {
        width: 100%;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        margin-top: 20rpx;

        .signature-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .signature-actions {
                display: flex;
                gap: 20rpx;

                .clear-btn,
                .save-btn {
                    padding: 10rpx 20rpx;
                    border-radius: 10rpx;
                    font-size: 24rpx;
                    cursor: pointer;
                }

                .clear-btn {
                    color: #999;
                    border: 1px solid #999;
                    background: #fff;
                }

                .save-btn {
                    color: #fff;
                    background: var(--color, #007aff);
                    border: 1px solid var(--color, #007aff);
                }
            }
        }

        .sigbBox {
            width: 100%;
            height: 380rpx;
            border: 1px solid #666;
            border-radius: 10rpx;
            position: relative;
            overflow: hidden;

            .mycanvas {
                width: 100%;
                height: 100%;
                box-shadow: 0px 7rpx 10rpx 0px rgba(0, 0, 0, 0.05);
            }
        }
    }
    .list {
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .title {
        width: 180rpx;
        color: #333;
        font-size: 26rpx;
    }
    ::v-deep.play {
        color: #999;
    }
    .btns {
        width: 258rpx;
        height: 76rpx;
        border-radius: 38rpx;
    }
    .config {
        background-color: var(--color);
    }
</style>
